<style>
  input{
    width:300px;
  }
</style>
<script type="text/javascript">
  /**
  * 1=> onClick()
  * 2=> onBlur()
  * 3=> onChange()
  * 4=> onSubmit()
  */
</script>
<input type="text" name="username" placeholder="Click here to get field name" onClick="alert(this.name)">
<br>
<input type="text" name="username" placeholder="Type something and put cursor outside" onBlur="alert(this.value)">
<br>
<input type="text" name="username" placeholder="Type something and put cursor outside" onChange="alert(this.value)">
<h4>OnBlur() VS onChange()</h4>
<p>
<strong><em>OnBlur()</em></strong> event happens when we put cursor outside the element.
</p>
<p>
<strong><em>OnChange()</em></strong> event occur when we change the value of element.
</p>
